<template>
  <div class="rankingContainer">
    <RankingCategory />
    <div class="rankingRight">
      <!-- 榜单基本信息 -->
      <RankingDetail />
      <!-- 榜单歌曲列表 -->
      <SongList
        :isRanking="true"
        :songListDetail="songListDetail"
        :songList="rankingDetail.tracks"
        :compareList="rankingDetail.trackIds"
      />
    </div>
  </div>
</template>

<script>
import RankingCategory from './components/RankingCategory.vue'
import RankingDetail from './components/RankingDetail.vue'
import SongList from '@/components/SongList.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Ranking',
  computed: {
    ...mapState('ranking', ['rankingDetail']),
    // 要传递的排行榜列表介绍
    songListDetail() {
      return {
        songNum: this.rankingDetail.tracks
          ? this.rankingDetail.tracks.length
          : 0,
        playCount: this.rankingDetail.playCount
      }
    }
  },
  methods: {
    ...mapActions('ranking', ['getTopList'])
  },
  components: {
    RankingCategory,
    RankingDetail,
    SongList
  },
  created() {
    this.getTopList()
  }
}
</script>

<style lang="less" scoped>
.rankingContainer {
  display: flex;
  margin: 0 auto;
  width: 1000px;
  // border: 1px solid blue;
  // 右侧栏样式开始
  .rankingRight {
    flex-grow: 1;
    padding: 40px;
    background: white;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
  }
}
</style>
